<template>
  <div class="layout-wrapper">
    <div class="top">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-logo"></use>
      </svg><ul>
        <router-link v-for="(topMenu, k) of newMenu" :key="k" :to="topMenu.path" active-class="active" :class="{active: _showActive(topMenu.haveRouter)}">
          <li v-if="topMenu.show" v-text="topMenu.cn"></li>
        </router-link>
      </ul>
      <img v-if="showHasIn(userInfo, 'head_portrait')" :src="userInfo.head_portrait">
      <svg class="icon user-avatar" aria-hidden="true"><use xlink:href="#icon-defaultavatar"></use></svg>
      <span class="user-info" v-text="userInfo.name" @click="showUserInfo = !showUserInfo" :title="userInfo.nickname"></span>
      <ol class="user-info-menu" v-show="showUserInfo">
        <li @click="showChangeInfo = false; showUserInfo = false">x</li>
        <li @click="showChangeInfo = true; showUserInfo = false">修改资料</li>
        <li @click="showChangePassword = true; showUserInfo = false">修改密码</li>
        <li @click="logout">安全退出</li>
      </ol>
    </div>
    <div class="bottom">
      <div class="left">
        <ul>
          <router-link v-if="item.show" :to="item.path" v-for="(item, k) of left" :key="k" active-class="active" :class="{active: _showActive(item.haveRouter)}">
            <li>
              <svg class="icon left-icon" v-if="showHasIn(item, 'icon')" aria-hidden="true" v-html="'<use xlink:href=' + showHasIn(item, 'icon') + '></use>'"></svg>
              <span v-text="item.cn"></span>
              <template v-if="item.children.length > 0">
                <svg class="icon right-icon" aria-hidden="true">
                  <use v-if="item.haveRouter.includes(thisRoute)" xlink:href="#icon-arrowdown"></use>
                  <use v-else xlink:href="#icon-arrowright"></use>
                </svg>
              </template>
            </li>
            <ol v-if="item.children.length > 0 && _showActive(item.haveRouter)">
              <router-link v-if="itemc.show" :to="itemc.path" v-for="(itemc, kc) of item.children" :key="kc" active-class="active" :class="{active: _showActive(itemc.haveRouter)}">
                <li v-text="itemc.cn"></li>
              </router-link>
            </ol>
          </router-link>
        </ul>
      </div>
      <div class="right">
        <div class="content"><router-view></router-view></div>
        <div class="right-bottom" v-text="layoutInfo.msg" :class="[layoutInfo.status === 1 ? 'success' : 'warning']"></div>
      </div>
    </div>
    <message-box class="update-user-info" :show="showChangeInfo" @affirm="affirmUpdateUserInfo" @cancel="showChangeInfo = false" title="修改资料">
      <ul>
        <li>
          <span>呢称</span>
          <input type="text" v-model="updateUserInfo.nickname">
        </li>
        <li>
          <span>性别</span>
          <el-radio-group v-model="updateUserInfo.sex">
            <el-radio label="gent">男</el-radio>
            <el-radio label="lady">女</el-radio>
            <el-radio label="no">保密</el-radio>
          </el-radio-group>
        </li>
      </ul>
    </message-box>
    <message-box :show="showChangePassword" @cancel="showChangePassword = false" title="修改密码">
      <ul>
        <li>
          <span>　旧密码</span>
          <input type="text" v-model="updatePassword.old_login_password">
        </li>
        <li>
          <span>　新密码</span>
          <input type="text" v-model="updatePassword.old_login_password">
        </li>
        <li>
          <span>验证密码</span>
          <input type="text" v-model="updatePassword.old_login_password">
        </li>
      </ul>
    </message-box>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { isEmpty, hasIn } from 'lodash'
import menu from '@/config/menu/index'
import messageBox from '@/components/public/MessageBox'
// import storage from '@/tools/storage'

export default{
  components: {messageBox},
  created () {
    this.isLogin()
    this.updateUserInfo.nickname = this.userInfo.nickname
    this.updateUserInfo.sex = this.userInfo.sex
  },
  mounted () {
    this.isLogin()
    // console.log('menu:', this.newMenu)
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.info,
      layoutInfo: state => state.layout.info
    }),
    left () {
      let route = this.$route.matched[0].path
      for (let item of this.newMenu) {
        if (item.path === route) {
          return item.children
        }
      }
      return []
    },
    newMenu () {
      let authList = Array.from(new Set(this.authList))
      const regex = /^\/.+/
      for (let item of menu) {
        for (let cItem of item.children) {
          for (let gItem of cItem.children) {
            if (hasIn(gItem, 'hidden') === false) {
              gItem.hidden = false
            }
            if (gItem.hidden) {
              cItem.haveRouter.push(gItem.name)
            } else {
              if (regex.test(gItem.path)) {
                cItem.haveRouter.push(gItem.path)
              } else {
                cItem.haveRouter.push(item.path + '/' + gItem.path)
              }
            }

            cItem.haveRouter = Array.from(new Set([...cItem.haveRouter, ...gItem.hiddenRouter, ...gItem.haveRouter]))
            cItem.auths = Array.from(new Set([...cItem.auths, ...gItem.auths]))
            this._calcShow(gItem, authList)

            gItem.hidden && (gItem.show = false)
            // 如果当前孙子项的展示为真,则其父类就展示
            gItem.show && (cItem.show = true)
          }
          if (hasIn(cItem, 'hidden') === false) {
            cItem.hidden = false
          }
          if (regex.test(cItem.path)) {
            item.haveRouter.push(cItem.path)
          } else {
            item.haveRouter.push(item.path + '/' + cItem.path)
          }
          item.haveRouter = Array.from(new Set([...item.haveRouter, ...cItem.hiddenRouter, ...cItem.haveRouter]))
          item.auths = Array.from(new Set([...item.auths, ...cItem.auths]))
          this._calcShow(cItem, authList)
          cItem.hidden && (cItem.show = false)
          cItem.show && (item.show = true)
        }
        // console.log('item::', item)
        this._calcShow(item, authList)
      }
      return menu
    }
  },
  data () {
    return {
      updateUserInfo: {
        nickname: '',
        sex: ''
      },
      updatePassword: {
        old_login_password: '',
        login_password: '',
        re_login_password: ''
      },
      showUserInfo: false,
      showChangeInfo: false,
      showChangePassword: false
    }
  },
  methods: {
    // 是否拥有类active
    _showActive (item) {
      return item.includes(this.thisRoute) || item.includes(this.thisRouteName)
    },
    // 计算是否展示菜单的值
    _calcShow (item, authList) {
      if (item.auths.length === 0 || (hasIn(item, 'show') && item.show)) {
        item.show = true
      } else {
        let mearge = Array.from(new Set([...authList, ...item.auths]))
        item.show = (mearge.length - authList.length) < item.auths.length
      }
      // console.log('level:', gItem.level, ':', gItem.cn, mearge.length, '-', authListLen, '<', g
    },
    // 用户如未登录,跳转到登录页
    isLogin () {
      this.$store.dispatch('user/setUserInfoFromLocal')
      if (isEmpty(this.userInfo) || this.userInfo.id < 1 || this.userInfo.id > 1000) {
        this.$store.dispatch('user/clearUserInfo')
        this.$router.push('/login')
      }
    },
    // 退出登录
    logout () {
      this.$store.dispatch('user/logout').then(res => {
        this.$store.dispatch('auth/clearToken')
        this.showUserInfo = false
        this.$router.push('/login')
      }).catch(() => {
        this.$store.dispatch('auth/clearToken')
        this.showUserInfo = false
        this.$router.push('/login')
      })
    },
    // 管理员修改自己的信息
    affirmUpdateUserInfo () {
      this.$store.dispatch('user/editSelfInfo', this.updateUserInfo).then(() => {
        this.showChangeInfo = false
      }).catch(() => {

      })
      // console.log('affirmUpdateUserInfo')
    }
  }
}
</script>

<style scoped lang="scss">
  @import '../assets/scss/base.scss';

  .layout-wrapper {
    height: 100%;
    .top {
      position: relative;
      width: 100%;
      height: 80px;
      background: $c-dark-one;
      color: $c-t-white;
      font-size: 14px;
      a {
        color: $c-t-white;
      }
      .icon {
        width: 251px;
        height: 80px;
        background: $c-dark-two;
      }
      ul {
        display: inline-block;
        vertical-align: top;
        height: 80px;
        line-height: 80px;
        margin: 0;
        padding: 0;
        li {
          display: inline-block;
          padding: 0 15px;
          cursor: pointer;
          user-select: none;
          &:hover {
            background: $c-warning;
            color: $c-dark-two;
            // border-bottom: 4px solid $c-main;
            // height: 76px;
          }
        }
        .active > li {
          // background: $c-dark-two;
          // color: $c-t-main;
          border-bottom: 4px solid $c-success;
          height: 76px;
        }
      }
      .user-avatar{
        position: absolute;
        top: 26px;
        right: 80px;
        height: 30px;
        width: 30px;
      }
      .user-info {
        position: absolute;
        top: 0;
        right: 10px;
        height: 80px;
        line-height: 80px;
        margin-right: 20px;
        cursor: pointer;
        user-select: none;
      }
      .user-info-menu {
        position: absolute;
        bottom: -100px;
        right: 20px;
        z-index: 10;
        background: $c-b-five;
        list-style: none;
        padding-left: 0;
        border-radius: 5px;
        // box-shadow: 2px 2px 2px $c-main;
        li {
          margin: 10px 25px 10px 20px;
          user-select: none;
          cursor: pointer;
          color: $c-t-common;
          border-bottom: 1px solid $c-b-one;
          &:first-child{
            border: none;
            text-align: right;
            margin: 5px 10px -20px 20px;
          }
          &:last-child{
            margin-bottom: 15px;
          }
          &:hover{
            color: $c-t-main;
          }
        }
        &:hover{
          border: 1px solid $c-b-one;
        }
      }
    }
    .bottom {
      width: 100%;
      height: calc(100% - 80px);
      background: $c-b-four;
      .left {
        float: left;
        width: 250px;
        height: 100%;
        border-right: 1px solid $c-b-one;
        overflow-x: hidden;
        overflow-y: auto;
        background: $c-dark-one;
        ul {
          margin: 0;
          padding: 0;
          a {
            li {
              position: relative;
              color: $c-info;
              // border-bottom: 1px solid $c-b-two;
              height: 45px;
              line-height: 45px;
              padding-left: 40px;
              background: $c-dark-one;
              font-size: 14px;
              svg {
                position: absolute;
                top: 12px;
                max-width: 20px;
                max-height: 20px;
                fill: $c-info;
              }
              .left-icon {
                left: 10px;
              }
              .right-icon {
                right: 10px;
              }
              &:hover {
                background: $c-warning;
                color: $c-dark-two;
              }
            }
            ol {
              padding-left: 0;
              a {
                li {
                  height: 40px;
                  line-height: 40px;
                  padding-left: 60px;
                  background: $c-dark-two;
                  font-size: 13px;
                  &:hover {
                    background: $c-warning;
                    color: $c-dark-two;
                  }
                }
              }
            }
          }
        }
        .active > li {
          border-left: 4px solid $c-success;
          padding-left: 36px;
          .left-icon{
            left: 6px;
          }
        }
        ol > .active > li {
          border-left: 4px solid $c-warning;
          padding-left: 56px;
        }
      }
      .right {
        float: right;
        background: $c-t-white;
        width: calc(100% - 251px);
        height: 100%;
        .content {
          height: calc(100% - 51px);
          border-bottom: 1px solid $c-b-one;
          overflow-x: hidden;
          overflow-y: auto;
          padding: 20px 20px 0 20px;
        }
        .right-bottom {
          height: 30px;
          line-height: 30px;
          font-size: 12px;
          padding-left: 10px;
          background: $c-b-five;
          color: $c-t-minor;
        }
        .success {
          color: $c-success;
        }
        .warning {
          color: $c-warning;
        }
      }
    }
    .message-box {
      ul {
        li {
          height: 50px;
          line-height: 50px;
          font-size: 14px;
          span {
            margin-right: 20px;
          }
          input {
            padding-left: 10px;
            height: 30px;
            line-height: 30px;
            border: 1px solid $c-b-two;
          }
        }
      }
    }
  }
</style>
